<template>
	<view class="container">
		<view class="formBox">
			<!-- <view v-if="TripListtwo!==null">
				<view class="line-title">用户姓名：</view>
				<u--text :size="28" color="#333333" :text="TripListtwo.username"></u--text>
			</view> -->
			<u--form labelPosition="top" labelWidth="auto" :model="model" :rules="rules" ref="form">

				<u-form-item label="居住地址：" prop="address" borderBottom>
					<u--input v-model="model.address" disabledColor="#ffffff" placeholder="请输入居住地址" border="none">
					</u--input>
				</u-form-item>
				<u-form-item label="出发地:" prop="startArea" borderBottom>
					<u--input v-model="model.startArea" placeholder="请输入出发地" border="none"></u--input>
				</u-form-item>
				<u-form-item label="终点地:" prop="endArea" borderBottom>
					<u--input v-model="model.endArea" placeholder="请输入终点地" border="none"></u--input>
				</u-form-item>
				<u-form-item label="交通工具：" prop="tool" borderBottom>
					<u--input v-model="model.tool" disabledColor="#ffffff" placeholder="请输入交通工具" border="none">
					</u--input>
				</u-form-item>
				<u-form-item label="交通班次：" prop="number" borderBottom>
					<u--input v-model="model.number" disabledColor="#ffffff" placeholder="请输入交通班次" border="none">
					</u--input>
				</u-form-item>
				<u-form-item label="出发时间:" prop="startTime" @click="opneChangeData()" borderBottom>
					<u--input v-model="model.startTime" placeholder="请选择出发时间" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="到达时间:" prop="endTime" @click="opneChange()" borderBottom>
					<u--input v-model="model.endTime" placeholder="请选择到达时间" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
			</u--form>
			<u-gap height="64"></u-gap>
			<u-button type="primary" text="提交" @click="submit()"></u-button>
			<u-gap height="32"></u-gap>
		</view>
		<!-- 选择时间 -->
		<u-datetime-picker placeholder="请选择时间" :show="show" v-model="time" mode="datetime" @close="show = false"
			@cancel="show = false" @confirm="getDateConfirm"></u-datetime-picker>
		<!-- 选择时间 -->
		<u-datetime-picker placeholder="请选择时间" :show="showtwo" v-model="timetwo" mode="datetime" @close="showtwo = false"
			@cancel="showtwo = false" @confirm="getDateConfirmtwo"></u-datetime-picker>
	</view>
</template>

<script>
	import api from '@/api/api.js';
	export default {
		username: '',
		components: {},
		data() {
			return {
				username: null,
				heatname: '',
				id: null,
				show: false,
				showtwo: false,
				TripListtwo: null,
				time: Number(new Date()),
				timetwo:Number(new Date()),

				model: {
					address: null,
					startArea: null,
					endArea: null,
					tool: null,
					number: null,
					startTime: null,
					endTime: null,
				},
				rules: {
					name: [{
						type: 'string',
						required: true,
						message: '请输入用户姓名',
						trigger: ['blur', 'change']
					}],
					address: [{
						type: 'string',
						required: true,
						message: '请输入居住地址',
						trigger: ['blur', 'change']
					}],
					startArea: [{
						type: 'string',
						required: true,
						message: '请输入出发地',
						trigger: ['blur', 'change']
					}],
					endArea: [{
						type: 'string',
						required: true,
						message: '请输入终点地',
						trigger: ['blur', 'change']
					}],
					tool: [{
						type: 'string',
						required: true,
						message: '请输入交通工具',
						trigger: ['blur', 'change']
					}],
					number: [{
						type: 'string',
						required: true,
						message: '请输入交通班次',
						trigger: ['blur', 'change']
					}],
					startTime: [{
						type: 'string',
						required: true,
						message: '请选择出发时间',
						trigger: ['blur', 'change']
					}],
					endTime: [{
						type: 'string',
						required: true,
						message: '请选择到达时间',
						trigger: ['blur', 'change']
					}],
				},
				date_show: false,
				sex_show: false,
				date_tripDate: Number(new Date()),
			}
		},
		onLoad(option) {
			if (option.id != undefined) {
				this.id = option.id
				this.getDetails()
				this.getTripListtwo()
			}
		},
		methods: {
			// 获取行程列表
			getTripListtwo() {
				api.getTrip({
					id: this.id
				}).then(res => {
					console.log(res.data.rows[0])
					this.TripListtwo = res.data.rows[0]
				})

			},
			getDetails() {
				api.getmyTrip({
					id: this.id
				}).then(res => {
					let data = res.data.data
					this.model.address = data.address
					this.model.startArea = data.startArea
					this.model.endArea = data.endArea
					this.model.tool = data.tool
					this.model.number = data.number
					this.model.startTime = data.startTime
					this.model.endTime = data.endTime
					this.model.content = data.content
				})
			},
			// 点击重置
			reset() {
				this.model.address = null
				this.model.startArea = null
				this.model.endArea = null
				this.model.tool = null
				this.model.number = null
				this.model.startTime = null
				this.model.endTime = null
				this.model.content = null
			},
			// 点击提交
			submit() {
				this.$refs.form.validate().then(res => {
					let userInfo = uni.getStorageSync('userInfo')
					let data = {
						userId: userInfo.id,
						name: this.model.name,
						address: this.model.address,
						startArea: this.model.startArea,
						endArea: this.model.endArea,
						tool: this.model.tool,
						number: this.model.number,
						startTime: this.model.startTime,
						endTime: this.model.endTime,
						content: this.model.content
					}
					if (this.id == null) {
						api.addTrip(data).then(res => {
							console.log('新增', res)
							if (res.data.code == 200) {
								uni.$u.route({
									type: "navigateBack",
									url: "/pages/trip/index"
								});
							}
						})
					} else {
						let userInfo = uni.getStorageSync('userInfo')
						let data = {
							userId: userInfo.id,
							name: this.model.name,
							address: this.model.address,
							startArea: this.model.startArea,
							endArea: this.model.endArea,
							tool: this.model.tool,
							number: this.model.number,
							startTime: this.model.startTime,
							endTime: this.model.endTime,
							content: this.model.content,
							id: this.id
						}
						api.enitTrip(data).then(res => {
							console.log('修改')
							if (res.data.code == 200) {
								uni.$u.route({
									type: "navigateBack",
									url: "/pages/trip/index"
								});
							}
						})
					}
					uni.$u.toast('添加成功')
				}).catch(errors => {
					uni.$u.toast('添加失败')
				})
			},
			// 选择日期
			opneChangeData() {
				this.show = true;
			},
			opneChange() {
				if(this.model.startTime==null){
					uni.$u.toast('请先选择出发时间')
				}else{
					this.showtwo = true;
				}
				
			},
			getDateConfirm(e) {
				this.time = e.value
				this.model.startTime = uni.$u.timeFormat(e.value, 'yyy-mm-dd hh:MM');
				this.show = false;
			},
			getDateConfirmtwo(e) {
				this.timetwo = e.value
				this.model.endTime = uni.$u.timeFormat(e.value, 'yyy-mm-dd hh:MM');
				if(this.model.startTime < this.model.endTime){
					console.log('111')
					this.showtwo = false
				}else{
					uni.$u.toast('不能小于或等于出发时间')
					
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: calc(100% - 32rpx);
		padding: 0 16rpx;
	}

	.line-title {
		font-size: 30rpx;
	}

	.formBox {
		width: calc(100% - 64rpx);
		padding: 16rpx 32rpx;
		border-radius: 8rpx;
		background-color: #FFFFFF;
		margin: 16rpx 0;
	}
</style>
